﻿<script src="~/Scripts/jquery-easyui-extensions/treegrid/jeasyui.extensions.treegrid.rowState.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false">
    <table id="tg1"></table>
</div>

<script>

    function beginEdit(id) {
        var state = $("#tg1").treegrid("isEditing", id);
        if (state) { return; }
        $("#tg1").treegrid("beginEdit", id);
    }

    function endEdit(id) {
        var state = $("#tg1").treegrid("isEditing", id);
        if (!state) { return; }
        $("#tg1").treegrid("endEdit", id);
    }

    $(function () {

        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'ck', checkbox: true });
            c1.push({ field: 'AreaName', title: '地区', width: 130 });
            c1.push({ field: 'ID', title: '主键', width: 80 });
            c1.push({ field: 'Sex1', title: '男', width: 80 });
            c1.push({ field: 'Sex2', title: '女', width: 80 });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 110 },
                {
                    field: 'TS2', title: '测试2', width: 110,
                    editor: {
                        type: "validatebox"
                    }
                },
                {
                    field: 'op', title: '操作', width: 160,
                    formatter: function (val, row) {
                        return "<a href=\"#\" onclick=\"beginEdit(" + row.ID + ")\">开启编辑</a>&nbsp;&nbsp;<a href=\"#\" onclick=\"endEdit(" + row.ID + ")\">关闭编辑</a>";
                    }
                }
            ];
            result.push(normal00000);

            return result;
        };
        var options = {
            title: "列表",
            idField: "ID",
            treeField: "AreaName",
            rownumbers: true,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [
                {
                    iconCls: 'icon-add',
                    text: "检查索引为 3 的行是否被 check",
                    handler: function () {
                        var state = $("#tg1").treegrid("isChecked", 3);
                        alert(state ? "已选中" : "未选中");
                    }
                },
                "-",
                {
                    iconCls: 'icon-add',
                    text: "检查索引为 7 的行是否被 select",
                    handler: function () {
                        var state = $("#tg1").treegrid("isSelected", 7);
                        alert(state ? "已选择" : "未选择");
                    }
                },
                "-",
                {
                    iconCls: 'icon-add',
                    text: "检查索引为 1 的行是否被 editing",
                    handler: function () {
                        var state = $("#tg1").treegrid("isEditing", 1);
                        alert(state ? "正在编辑" : "未编辑");
                    }
                }
            ],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/treegrid/treegrid-common-data.json"
        };

        $("#tg1").treegrid(options);
    });
</script>